import React, { Component } from 'react';
import './mybadge.css';
import { empiricalValue, empiricalName } from '../../utils/tool'

export default class MyBadge extends Component {
    constructor(props) {
        super(props)
        this.state = {
            index: 3
        }
    }
    render() {
        const userAnchorBrand = this.props.data.userAnchorBrand
        const userAnchorMark = this.props.data.userAnchorMark
        const userStudyMark = this.props.data.userStudyMark

        let rank,name

        if (userAnchorBrand === ''){
            rank = empiricalValue(userStudyMark)
            name = empiricalName(userStudyMark)
        }else{
            rank = empiricalValue(userAnchorMark)
            name=userAnchorBrand
        }
        return (
            <div className={`mybadge-${rank}`}>
                <div className={`mybadge-name-${rank}`} style={{fontWeight:'bold'}}>{name}</div>
                <div className={`mybadge-lv-${rank}`} style={{fontWeight:'bold'}}>{rank}</div>
            </div>
        );
    }
}
